<template>
  <div>
    <a href="javascript:void(0)" @click="showAddDialog">
      <i class="fa fa-plus text-primary" />
      添加项目
    </a>
    <el-table :data="projects" style="width: 100%" @row-click="handleRowClick">
      <el-table-column prop="name" label="名称" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="showEditDialog(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteProject(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑项目' : '添加项目'">
      <el-form :model="form" label-width="120px">
        <el-form-item label="项目名称">
          <el-input v-model="form.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveProject">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { projectService } from '@/services/business/project.service';
import type { Project } from '@/types/business/project';

const projects = ref<Project[]>([]);
const dialogVisible = ref(false);
const isEdit = ref(false);
const form = ref({ id: '', name: '' });

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const emit = defineEmits(['select']);

const fetchProjects = async () => {
  const response = await projectService.getProjects(currentPage.value, pageSize.value);
  projects.value = response.records;
  total.value = response.total;
};

const showAddDialog = () => {
  isEdit.value = false;
  form.value = { id: '', name: '' };
  dialogVisible.value = true;
};

const showEditDialog = (row: Project) => {
  isEdit.value = true;
  form.value = { ...row };
  dialogVisible.value = true;
};

const saveProject = async () => {
  if (isEdit.value) {
    await projectService.updateProject(form.value.id, { name: form.value.name });
    ElMessage.success('项目更新成功');
  } else {
    const newProject = await projectService.addProject({ name: form.value.name });
    projects.value.push(newProject);
    ElMessage.success('项目添加成功');
  }
  dialogVisible.value = false;
  fetchProjects();
};

const deleteProject = async (row: Project) => {
  await projectService.deleteProject(row.id);
  ElMessage.success('项目删除成功');
  fetchProjects();
};

const handleRowClick = (row: Project) => {
  emit('select', row);
};

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  fetchProjects();
};

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  fetchProjects();
};

onMounted(() => {
  fetchProjects();
});
</script>
